
<template>
  <div>
    <Modal
      v-model="showBox"
      title="修改头像"
      :footer-hide="true"
      :mask-closable="false"
      @on-visible-change="vChange"
      width="290"
    >
      <croppa
        v-model="myCroppa"
        :width="260"
        :height="260"
        :placeholder="'选 择 图 片'"
        canvas-color="transparent"
        initial-size="cover"
        initial-position="center"
        accept="image/*"
        class="marginB20"
      ></croppa>

      <div class="marginB20">提示：滚动鼠标滚轮，图片可放大缩小。</div>

      <Button type="primary" class="marginB10" size="large" long @click="finalImgFun">确 定</Button>
    </Modal>
  </div>
</template>



<script>
//头像裁切 插件
import Vue from "vue";
import Croppa from "vue-croppa";
import "vue-croppa/dist/vue-croppa.css";
Vue.use(Croppa); //安装插件

export default {
  name: "headImgBox",
  components: {},
  data() {
    let data = {
      // 弹框是否显示
      showBox: false
    };
    let tool = {
      myCroppa: {},
      judImg:''//判断上传的图片
    };
    return Object.assign(data, tool);
  },
  created() {},
  methods: {
    finalImgFun() {
      let okImg = this.myCroppa.generateDataUrl("image/jpeg", 0.8); //压缩质量80%
      //输出 base64图片，并带压缩
      // console.log("okImg = ", okImg);

      if (okImg != "") {
        $app.selectFileImage(null,null,okImg,14,resData=>{
          let {
            file_url,
            file_path:path
          }=resData;
          //保存头像
	        $ajax.updateHeadImg(path,()=>{
            this.judImg=file_url;
            this.$store.commit('upData_userImg',file_url);//赋值给全局 头像
            this.showBox=false;
          });
        });
      } else {
        $app.alert("选择图片不能为空" );
      }
    },

    //弹框消失
    vChange(buEr) {
      if (!buEr) {//关闭
        let {
          judImg
        }=this;
        if($app.judgeData(judImg)){
          this.myCroppa.remove();//清空上传图片
          this.judImg='';
        }else{
          //没有进行头像上传操作 无需处理
        }
      } else {
        //显示
      }
    }
  }
};
</script>
